<template>
  <view class="report-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="nav-title">医疗报告系统</text>
    </view>

    <!-- 主体内容：等距布局的报告模块 -->
    <view class="main-content">
      <!-- 左侧：患者信息区 -->
      <view class="module left-module">
        <view class="patient-info">
          <text class="section-title">患者信息</text>
          <view class="info-item" v-for="(item, index) in patientInfo" :key="index">
            <text class="info-label">{{ item.label }}</text>
            <text class="info-value">{{ item.value }}</text>
          </view>
        </view>
        <view class="diagnosis-summary">
          <text class="section-title">诊断摘要</text>
          <text class="summary-content">{{ diagnosisSummary }}</text>
        </view>
      </view>

      <!-- 中间：检查结果区 -->
      <view class="module center-module">
        <view class="test-results">
          <text class="section-title">检查结果</text>
          <view class="result-item" v-for="(item, index) in testResults" :key="index">
            <text class="result-name">{{ item.name }}</text>
            <text class="result-value">{{ item.value }}</text>
            <text class="result-unit">{{ item.unit }}</text>
            <text class="result-status" :class="item.status">{{ item.statusText }}</text>
          </view>
        </view>
      </view>

      <!-- 右侧：医生建议与操作区 -->
      <view class="module right-module">
        <view class="doctor-advice">
          <text class="section-title">医生建议</text>
          <text class="advice-content">{{ doctorAdvice }}</text>
        </view>
        <view class="action-buttons">
          <view 
            class="action-btn" 
            v-for="(item, index) in actionButtons" 
            :key="index"
            @click="handleAction(item)"
          >
            <text class="btn-text">{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
  
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 患者信息
const patientInfo = ref([
  { label: '姓名', value: '张三' },
  { label: '年龄', value: '45岁' },
  { label: '性别', value: '男' },
  { label: '病例号', value: '20250929001' },
  { label: '入院日期', value: '2025-09-25' }
]);

// 诊断摘要
const diagnosisSummary = ref('患者因高血压和轻度心律不齐入院，整体情况稳定，建议继续观察并调整药物治疗方案。');

// 检查结果
const testResults = ref([
  { name: '血常规', value: '正常', unit: '', status: 'normal', statusText: '正常' },
  { name: '血糖', value: '6.2', unit: 'mmol/L', status: 'warning', statusText: '偏高' },
  { name: '心电图', value: '轻度异常', unit: '', status: 'abnormal', statusText: '异常' },
  { name: '血脂', value: '4.8', unit: 'mmol/L', status: 'normal', statusText: '正常' }
]);

// 医生建议
const doctorAdvice = ref('建议患者继续服用降压药，定期监测血糖和心电图，保持低盐饮食，增加适量运动，避免过度劳累。');

// 操作按钮
const actionButtons = ref([
  { name: '导出报告', action: 'export' },
  { name: '发送医生', action: 'send' },
  { name: '打印报告', action: 'print' },
  { name: '存档', action: 'archive' }
]);

// 模拟动态更新检查结果（实际需对接后端）
onMounted(() => {
  setInterval(() => {
    testResults.value[1].value = (Math.random() * (7.0 - 5.5) + 5.5).toFixed(1);
    testResults.value[1].status = testResults.value[1].value > 6.0 ? 'warning' : 'normal';
    testResults.value[1].statusText = testResults.value[1].value > 6.0 ? '偏高' : '正常';
  }, 10000);
});

// 操作按钮点击事件
const handleAction = (item) => {
  let toastMsg = '';
  switch (item.action) {
    case 'export':
      toastMsg = '正在导出医疗报告';
      break;
    case 'send':
      toastMsg = '报告已发送给主治医生';
      break;
    case 'print':
      toastMsg = '正在打印医疗报告';
      break;
    case 'archive':
      toastMsg = '报告已存档';
      break;
  }
  uni.showToast({
    title: toastMsg,
    icon: 'none'
  });
};
</script>

<style scoped>
/* 全局容器：等距视角背景 */
.report-container {
  background-color: #f8f9fb;
  min-height: 100vh;
  padding: 20px;
}

/* 顶部导航栏 */
.nav-bar {
  background: linear-gradient(135deg, #4a90e2,  #5f47d7);
  border-radius: 12px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
}

.nav-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
}

/* 主体内容布局 */
.main-content {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.module {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 20px;
}

.left-module, .right-module {
  width: 89%;
  margin-bottom: 20px;
}

.center-module {
  width: 89%;
}

/* 左侧：患者信息区 */
.patient-info {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #4a90e2;
  margin-bottom: 10px;
  display: block;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f0f2fa;
}

.info-label {
  font-size: 14px;
  color: #666666;
}

.info-value {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
}

.diagnosis-summary {
  margin-top: 20px;
}

.summary-content {
  font-size: 14px;
  color: #333333;
  line-height: 1.5;
}

/* 中间：检查结果区 */
.test-results {
  margin-bottom: 20px;
}

.result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: linear-gradient(135deg, #e6f0fa, #f0f2fa);
  border-radius: 6px;
  margin-bottom: 8px;
}

.result-name {
  font-size: 14px;
  color: #4a90e2;
  flex: 2;
}

.result-value {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
  flex: 1;
}

.result-unit {
  font-size: 12px;
  color: #888888;
  flex: 1;
}

.result-status {
  font-size: 12px;
  flex: 1;
  text-align: right;
}

.normal {
  color: #50c878;
}

.warning {
  color: #f4a261;
}

.abnormal {
  color: #e63946;
}

/* 右侧：医生建议与操作区 */
.doctor-advice {
  margin-bottom: 20px;
}

.advice-content {
  font-size: 14px;
  color: #333333;
  line-height: 1.5;
}

.action-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.action-btn {
  background: linear-gradient(135deg, #4a90e2, #50c878);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  transition: all 0.3s ease;
}

.action-btn:active {
  transform: scale(0.95);
  opacity: 0.9;
}

.btn-text {
  color: #ffffff;
  font-size: 16px;
}
</style>